// 添加学生弹框显示
const modalDom = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalDom)
let stringId = 0
// 软件设计原则：开闭原则，对新增开放，对修改关闭  - 解耦
// 1.获取学生
async function getStudent() {
    pxmu.loading('正在加载中..');
    try {
        let res = await axios({
            url: '/students',
        })
        return res.data.data
    } catch (err) {
        console.log(err.response);
    }
}
// 1.渲染学生
async function RederStudent() {
    let data = await getStudent()
    // console.log(data);
    pxmu.closeload(100);
    let student = data.map(ele => {
        return `
        <tr>
            <td>${ele.name}</td>
            <td>${ele.age}</td>
            <td>${ele.gender === 0 ? '男' : '女'}</td>
            <td>第${ele.group}组</td>
            <td>${ele.hope_salary}</td>
            <td>${ele.salary}</td>
            <td>${ele.province + ele.city + ele.area}</td>
            <td data-id="${ele.id}">
                <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
                <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
            </td>
        </tr>
        `
    }).join('')
    document.querySelector('.list').innerHTML = student
    document.querySelector('.total').innerHTML = data.length
}
// 2.编辑功能
// 2.1获得省
async function getProvince() {
    try {
        return await axios({ url: '/api/province' })
    } catch (err) {
        pxmu.fail(err.response && err.response.data.message || '获取省份数据异常，检查网络')
    }

}
// 2.2获得市
async function getCity(pname) {
    try {
        return await axios({ url: '/api/city?pname=' + pname })
    } catch (err) {
        pxmu.fail(err.response && err.response.data.message || '获取城市数据异常，检查网络')
    }
}
// 2.3获得区
async function getArea(pname, cname) {
    try {
        return await axios({ url: `/api/area?pname=${pname}&cname=${cname}` })
    } catch (err) {
        pxmu.fail(err.response && err.response.data.message || '获取地区数据异常，检查网络')
    }
}
// 2.4获得学生详情旧数据
async function getStudentOld(id) {
    try {
        return await axios({ url: `/students/${id}` })
    } catch (err) {
        pxmu.fail(err.response && err.response.data.message || '获取学生详情异常，检查网络')
    }
}
// 2.5修改学生数据
async function PutStudent(id, body) {
    try {
        return await axios({ url: `/students/${id}`, method: 'PUT', data: body })
    } catch (err) {
        pxmu.fail(err.response && err.response.data.message || '获取学生详情异常，检查网络')
    }
}
// 2.6初始化渲染省市区
// 2.6.1渲染省
const province = document.querySelector('[name=province]')
async function renderPlace() {
    let provinceData = sessionStorage.getItem('provinceData')

    if (!provinceData) {
        provinceData = await getProvince()
        sessionStorage.setItem('provinceData', JSON.stringify(provinceData))
    } else {
        provinceData = JSON.parse(provinceData)
    }
    let provinceHtml = provinceData.data.list.map(ele => {
        return `<option value="${ele}">${ele}</option>`
    }).join('')
    province.innerHTML = `<option value="">--省份--</option>${provinceHtml}`
}
// 2.6.2渲染市
const city = document.querySelector('[name=city]')
async function RederCity(pname) {
    // 是否已经有城市数据
    let cityData = sessionStorage.getItem(`cityData_${pname}`)
    if (!cityData) {
        cityData = await getCity(pname)
        sessionStorage.setItem(`cityData_${pname}`, JSON.stringify(cityData))
    } else {
        cityData = JSON.parse(cityData)
    }
    let cityHtml = cityData.data.list.map(ele => {
        return `<option value="${ele}">${ele}</option>`
    }).join('')
    city.innerHTML = `<option value="">--城市--</option>${cityHtml}`
}
// 2.6.3渲染区
const area = document.querySelector('[name=area]')
async function RederArea(pname, cname) {
    let areaData = sessionStorage.getItem(`areaData_${pname}_${cname}`)
    if (!areaData) {
        areaData = await getArea(pname, cname)
        sessionStorage.setItem(`areaData_${pname}_${cname}`, JSON.stringify(areaData))
    } else {
        areaData = JSON.parse(areaData)
    }
    let areaHtml = areaData.data.list.map(ele => {
        return `<option value="${ele}">${ele}</option>`
    }).join('')
    area.innerHTML = `<option value="">--地区--</option>${areaHtml}`
}
// 2.7回显学生旧数据
async function renderStudentOld(id) {
    let data = await getStudentOld(id)
    // console.log(data);
    document.querySelector('.modal-title').innerHTML = '修改学员'
    // 渲染姓名
    document.querySelector('[name=name]').value = data.data.data.name
    // 渲染年龄
    document.querySelector('[name=age]').value = data.data.data.age
    // 渲染组
    document.querySelector('[name=group]').value = data.data.data.group
    // 渲染期望薪资
    document.querySelector('[name=hope_salary]').value = data.data.data.hope_salary
    // 渲染薪资
    document.querySelector('[name=salary]').value = data.data.data.salary
    // 渲染性别
    const { gender } = data.data.data
    const chks = document.querySelectorAll('[name=gender]')
    chks.forEach(ele => {
        if (ele.value == gender) {
            ele.checked = true
        }
    })
    // 渲染省
    document.querySelector('[name=province]').value = data.data.data.province
    // 渲染市
    let cityOld = await getCity(data.data.data.province)
    let citySelect = document.querySelector('[name=city]')
    let cityHtmlOld = cityOld.data.list.map(ele => {
        return `<option value="${ele}">${ele}</option>`
    }).join('')
    city.innerHTML = `<option value="">--城市--</option>${cityHtmlOld}`
    citySelect.value = data.data.data.city
    // 渲染区
    let areaOld = await getArea(data.data.data.province, data.data.data.city)
    let areaSelect = document.querySelector('[name=area]')
    let areaHtmlOld = areaOld.data.list.map(ele => {
        return `<option value="${ele}">${ele}</option>`
    }).join('')
    area.innerHTML = `<option value="">--地区--</option>${areaHtmlOld}`
    areaSelect.value = data.data.data.area
    pxmu.closeload(100);
}
// 2.8保存修改数据
async function PutStudentDatd() {
    const formBox = document.querySelector('#form')
    //  收集表单数据
    let body = serialize(formBox, { hash: true, empty: true })
    body.age = +body.age
    body.gender = +body.gender
    body.group = +body.group
    body.hope_salary = +body.hope_salary
    body.salary = +body.salary
    // console.log(body);
    // 调用putStudentInfoData完成数据的修改
    await PutStudent(stringId, body)
    //  关闭模态框+刷新列表数据
    modal.hide()
    stringId = 0
    RederStudent()
}
// 3.删除功能
async function delStudent(id) {
    try {
        return await axios({ url: `/students/${id}`, method: 'DELETE' })
    } catch (err) {
        pxmu.fail(err.response && err.response.data.message || '删除学生详情异常，检查网络')
    }
}
// 4.添加功能
async function Postadd(body) {
    try {
        return await axios({ url: '/students', method: 'POST', data: body })
    } catch (err) {
        pxmu.fail(err.response && err.response.data.message || '添加学生详情异常，检查网络')
    }
}
// 4.1 收集表单数据
async function addStudentData() {
    const formBox = document.querySelector('#form')
    //  收集表单数据
    let body = serialize(formBox, { hash: true, empty: true })
    //校验输入数据是否合法
    if (Object.values(body).some(value => value === '')) {
        return pxmu.toast('内容不能为空')
    }
    if (body.group < 1 || body.group > 8) {
        return pxmu.toast('学生组号必须在1-8之间')
    }
    if (body.name < 1 || body.name > 30) {
        return pxmu.toast('学生名字只能1-30字符')
    }
    body.age = +body.age
    body.gender = +body.gender
    body.group = +body.group
    body.hope_salary = +body.hope_salary
    body.salary = +body.salary
    // console.log(body);
    // 调用putStudentInfoData完成数据的修改
    await Postadd(body)
    //  关闭模态框+刷新列表数据
    modal.hide()
    RederStudent()
}
// 其他事件
function incident() {
    // 删除按钮
    document.querySelector('.list').addEventListener('click', async (e) => {
        // 点了删除按钮
        if (e.target.classList.contains('bi-trash')) {
            stringId = e.target.parentNode.parentNode.dataset.id
            // console.log(id);
            pxmu.loading('正在加载中..');
            await delStudent(stringId)
            pxmu.closeload(100);
            RederStudent()
        }
        // 点击修改按钮
        if (e.target.classList.contains('bi-pen')) {
            stringId = e.target.parentNode.parentNode.dataset.id
            // console.log(id);
            pxmu.loading('正在加载中..');
            renderStudentOld(stringId)
            modal.show()
        }
    })
    // 保存按钮
    document.querySelector('#submit').addEventListener('click', async function (e) {
        e.preventDefault()
        if (stringId > 0) {
            await PutStudentDatd()
        } else {
            // 新增
            await addStudentData()
        }
    })
    // 注册省份和市区select的change事件
    province.addEventListener('change', async function (e) {
        const pname = e.target.value
        await RederCity(pname)
    })
    city.addEventListener('change', async function (e) {
        const pname = province.value
        const cname = e.target.value
        await RederArea(pname, cname)
    })
    // 表单重置
    document.querySelector('#openModal').addEventListener('click', function (e) {
        e.preventDefault()
        document.querySelector('.modal-title').innerHTML = '添加学员'
        document.querySelector('#form').reset()
        document.querySelector('[name=city]').innerHTML = '<option value="">--城市--</option>'
        document.querySelector('[name=area]').innerHTML = '<option value="">--地区--</option>'
        modalDom.dataset.id = ''
        modal.show()
    })
}
// 初始化调用
setUserName()
RederStudent()
incident()
renderPlace()